<!DOCTYPE html>
<html lang="en">
<head>
<title>系统用户编辑页面</title> 
#@common()
<style type="text/css">
body { padding: 10px; background: #fff; }
.layui-form-label { min-width: 100px; margin-bottom: 0px;}
body * {color: #393939 !important;}
.headimg {height: 100%; width: 100%; padding: 0px; background-size:100% 100% !important; }
.headimg p{color: #f30404 !important; font-size: 14px; font-weight: bold; margin-top: 80% !important;}
</style>
</head>
<body>
	<form class="layui-form layui-fluid" action="">
		<input type="hidden" name="id" value="#(user.id)" />
		<input type="hidden" name="headImg" id="headimgurl" value="#(user.headImg)" />
		<div class="layui-row" style="width: 850px; margin-top: 20px;">
			<div class="layui-col-md10 layui-col-xs10 layui-col-sm10">
				<div class="layui-row layui-form-item">
					<div class="layui-col-md2 layui-col-xs2 layui-col-sm2">
						<label class="layui-form-label">登陆账号</label>
					</div>
					<div class="layui-col-md4 layui-col-xs4 layui-col-sm4">
						<input lay-verify="required" name="loginName" type="text" class="layui-input"
							 #if(user.id??)disabled#end
							 autocomplete="off" value="#(user.loginName)"/>
					</div>
					
					<div class="layui-col-md2 layui-col-xs2 layui-col-sm2">
						<label class="layui-form-label">设置角色</label>
					</div>
					<div class="layui-col-md4 layui-col-xs4 layui-col-sm4">
						<select name="roleId" lay-verify="required">
							<option value="">请选择--</option>
							#for(role : roles)
					        <option #if(user.roleId == role.Id) selected #end value="#(role.id)">#(role.roleName)</option>
					        #end
					    </select>
					</div>
				</div>
					
				<div class="layui-row layui-form-item">
					<div class="layui-col-md2 layui-col-xs2 layui-col-sm2">
						<label class="layui-form-label">用户姓名</label>
					</div>
					<div class="layui-col-md4 layui-col-xs4 layui-col-sm4">
						<input lay-verify="required" type="text" name="userName" class="layui-input"
							 autocomplete="off" value="#(user.userName)"/>
					</div>
					
					<div class="layui-col-md2 layui-col-xs2 layui-col-sm2">
						<label class="layui-form-label">用户性别</label>
					</div>
					<div class="layui-col-md4 layui-col-xs4 layui-col-sm4">
						<select name="sex">
							<option value="">请选择--</option>
							#for(dict : sexes)
					        <option #if((user.sex+'') == dict.data)selected #end value="#(dict.data)">#(dict.name)</option>
					        #end
					    </select>
					</div>
				</div>
					
				<div class="layui-row layui-form-item">
					<div class="layui-col-md2 layui-col-xs2 layui-col-sm2">
						<label class="layui-form-label">出生日期</label>
					</div>
					<div class="layui-col-md4 layui-col-xs4 layui-col-sm4">
						<input name="birthday" id="birthday" type="text" class="layui-input"
							 autocomplete="off" value="#(user.birthday)"/>
					</div>
				</div>
		    </div>
			<div class="layui-col-md2 layui-col-xs2 layui-col-sm2" style="height: 144px; padding: 0px 0px 0px 10px;">
				<div class="layui-upload-drag headimg" id="headimg" style="background: url(#if(user.headImg??)#(user.headImg)#else'static/admin/img/headimg.jpg'#end);">
					<p style="margin: auto;">点击上传头像</p>
				</div>
			</div>
		</div>
	  		
	  	<div class="layui-row" style="width: 850px; ">
		  	<div class="layui-form-item" style="margin-top: 20px;">
				<div class="layui-col-md3 layui-col-xs3 layui-col-sm3 layui-col-md-offset9 layui-col-xs-offset9 layui-col-sm-offset9">
					<button class="layui-btn layui-bg-blue" lay-submit lay-filter="form">保存数据</button>
					<button type="button" class="layui-btn layui-btn-primary" onclick="closeLayer()">关闭返回</button>
				</div>
			</div>
		</div>
	</form>

	<script>
		// 加载下拉列表的treeSelect设置
		layui.config({
		    base: 'static/libs/layui/module/'
		}).extend({
		    treeSelect: 'treeSelect/treeSelect'
		});
		//layui的相关数据加载
		layui.use(['form','upload', 'treeSelect', 'laydate'], function() {
			var form = layui.form, 
				upload = layui.upload,
				treeSelect= layui.treeSelect,
				laydate = layui.laydate;
			//监听提交
			form.on('submit(form)', function(data) {
				Http.post('admin/user/save', data.field, function(res){
					if(res.succeed){
						parent.layer.msg('保存成功',{shade:0.1})
						closeLayer();
					} else {
						parent.layer.msg('保存失败')
					}
				})
				return false;
			});
			
			// 头像上传
			upload.render({
			    elem: '#headimg'
			    ,url: 'admin/file/upload/'
			    ,accept: 'file'
			    ,exts: 'jpg|png|JPEG'
			    ,done: function(res){
			      console.log(res);
			      $('#headimg').css('background', 'url(upload/'+res.fileName+')');
			      $('#headimgurl').val('upload/'+res.fileName);
			    }
			});
			
			
			laydate.render({
			    elem: '#birthday' //指定元素
			});
		});
		
		/** 关闭系统菜单录入页面 */
		function closeLayer(){
			parent.jqGrid.reload();
			closeParentLayer();
		}
		
	</script>
</body>
</html>